<template>
	<view class="tkxq">
		<text class="ytk">退款成功</text>
		<view class="pri">
			<text class="jg">￥</text>
			<text class="qq">39.4</text>
			<text class="tkzf">已退款至支付宝</text>
		</view>
		<view class="jdd">
			<u-steps current="1" dot activeColor="#41a863">
				<u-steps-item title="同意退款" desc="01-07 12:11"></u-steps-item>
				<u-steps-item title="支付宝处理中" desc="01-07 12:11"></u-steps-item>
				<u-steps-item title="到账成功" desc="01-07 12:11"></u-steps-item>
			</u-steps>
		</view>
		<!-- 退优惠券 -->
		<view class="tq">
			<text class="tyh">退优惠券</text>
			<view class="yhq">
				<view class="jsyh">
					<view class="suj" style="color: #bebebe;">
						<text>￥</text>
						<text>0.5</text>
					</view>
					<text style="color: #b8b8b8;">无门槛</text>

				</view>
				<text class="wm" style="color: #b8b8b8;">享有无门槛限时立减0.5元</text>

				<image src="/static/已失效.png" mode=""></image>

			</view>
		</view>
		<!-- 订单详情 -->
		<view class="dd">

			<u-row customStyle="margin-bottom: 5px">
				<u-col span="3">
					<view class="demo-layout bg-purple-light">订单编号</view>
				</u-col>
				<u-col span="7">
					<view class="demo-layout bg-purple-light">25051-151515153216551565</view>
				</u-col>
				<u-col span="2">
					<view class="demo-layout bg-purple" style="width:25px;">
						<u-button type="primary" size="mini" :plain="true" color="#727374" text="复制"></u-button>
					</view>
				</u-col>
			</u-row>

			<u-row customStyle="margin-bottom: 5px">
				<u-col span="3">
					<view class="demo-layout bg-purple-light">服务名称</view>
				</u-col>
				<u-col span="9">
					<view class="demo-layout bg-purple-light">25051-151515153216551565</view>
				</u-col>

			</u-row>
			<u-row customStyle="margin-bottom: 5px">
				<u-col span="3">
					<view class="demo-layout bg-purple-light">申请金额</view>
				</u-col>
				<u-col span="9">
					<view class="demo-layout bg-purple-light">￥8.59</view>
				</u-col>

			</u-row>

			<u-row customStyle="margin-bottom: 5px">
				<u-col span="3">
					<view class="demo-layout bg-purple-light">申请原因</view>
				</u-col>
				<u-col span="9">
					<view class="demo-layout bg-purple-light">不想要了(不想要/不喜欢)</view>
				</u-col>

			</u-row>


		</view>
		<!--  处理记录 -->
		<view class="cljl">
			<text class="cl">处理记录</text>
			<view class="clj">
				<u-steps current="1" dot direction="column" inactiveColor="#b1b1b1" activeColor="#676767">
					<u-steps-item title="申请取消订单" desc="2025-01-07 10:30:35">
					</u-steps-item>
					<u-steps-item title="平台同意退款" desc="2025-01-07 10:30:35">
					</u-steps-item>
					<u-steps-item title="退款成功" desc="2025-01-07 10:30:57"></u-steps-item>
				</u-steps>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less">
	page {
		// background-color: aliceblue;
	}

	.tkxq {
		.ytk {
			margin-left: 8px;
			font-size: 24px;
			font-weight: bold;
		}

		.pri {
			margin-left: 8px;

			.jg {
				font-size: 14px;
			}

			.qq {
				font-size: 20px;
				font-weight: bold;
			}

			.tkzf {
				margin-left: 8px;
				font-size: 12px;
				color: #41a863;
			}
		}

		.jdd {
			margin-top: 25px;
		}

		.tq {
			margin-top: 15px;

			.tyh {
				margin-left: 8px;
				font-size: 15px;
				// font-weight: bold;
				color: #070708;
			}

			.yhq {
				border-radius: 8px;
				padding: 8px;
				margin: 8px;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background-color: #fafafa;
				border: #727374 solid 1px;

				.jsyh {
					.suj {
						font-size: 15px;

					}
				}

				.wm {
					font-size: 15px;
				}

				image {
					width: 60px;
					height: 60px;
				}

			}
		}

		.dd {
			font-size: 12px;
			color: #727374;
			margin-top: 16px;
			padding: 8px;
		}

		.cljl {
			margin-left: 8px;
			.cl{
					color: #020203;
			}
			.clj {

				margin-top: 8px;
			}
		}

	}
</style>